<template>
  <div>
    <div class="songlistdetails" v-if="res.data">
      <i
        class="back iconfont icon-31fanhui1"
        @click="$router.back()">
      </i>
      <div class="head" v-if="detail.creator">
        <div
          class="mask"
          :style="{
            backgroundImage: `url('${detail.coverImgUrl}?imageView=1&type=webp&thumbnail=247x0')`,
          }"
        ></div>
        <div class="head-left">
          <ImgCount :item="detail"></ImgCount>
        </div>
        <div class="head-right">
          <p>{{ detail.name }}</p>
          <div class="head-portrait">
            <img
              class="portrait"
              :src="detail.creator.avatarUrl | picUrl"
              alt=""
            />{{ detail.creator.nickname }}
          </div>
        </div>
      </div>
      <div class="divide">歌曲列表</div>
      <div class="playall" @click="$emit('update:playlists', detail.tracks)">
        <div class="iii">
          <i class="ficon iconfont icon-24gf-play"></i>
        </div>
        播放全部<span v-if="detail.tracks">({{ detail.tracks.length }})</span>
        <div class="icons">
          <i class="icon iconfont icon-biaoqian"></i>
          <i class="icon iconfont icon-quanxuan"></i>
        </div>
      </div>
      <ul class="songList">
        <RecomItem
          v-for="(item, index) in detail.tracks"
          :index="index + 1"
          @click.native="
            $emit('update:currentSong', item),
              $emit('update:playlist', detail.tracks)
          "
          :key="item.id"
          :item="item"
          :currentSong="currentSong"
          :playing="playing"
        ></RecomItem>
      </ul>
      <h3 class="end">查看更多歌曲，请下载客户端</h3>
      <div class="divide">精彩评论</div>
      <ul class="comment">
        <HotComment
          v-for="item in res.data.hotComments"
          :key="item.id"
          :item="item"
        ></HotComment>
      </ul>
      <div class="divide">最新评论({{ res.data.total }})</div>
      <ul class="comment">
        <NewComment
          v-for="item in res.data.comments"
          :key="item.id"
          :item="item"
        ></NewComment>
      </ul>
    </div>
    <LoadingView v-else></LoadingView>
  </div>
</template>

<script>
import ImgCount from "@/components/ImgCount.vue";
import RecomItem from "@/components/RecomItem.vue";
import HotComment from "@/components/HotComment.vue";
import NewComment from "@/components/NewComment.vue";
import LoadingView from "@/components/LoadingView.vue";
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    idds: Number,
  },
  components: {
    ImgCount,
    RecomItem,
    HotComment,
    NewComment,
    LoadingView,
  },
  data: function () {
    return {
      detail: {},
      res: {},
      idd: null,
    };
  },
  //   初次创建  路由参数更新的时候不会再次触发
  created: function () {
    this.getSonglistDetails(
      this.$route.query.id ? this.$route.query.id : this.idds
    );
  },
  //   监听 路由参数的变化
  beforeRouteUpdate: function (to, from, next) {
    this.getSonglistDetails(to.query.id ? to.query.id : this.idds);
    next();
  },
  methods: {
    getSonglistDetails: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail", {
          params: { id },
        })
        .then((res) => {
          this.detail = res.data.playlist;
        });
      this.axios
        .get("https://apis.netstart.cn/music/comment/playlist", {
          params: { id },
        })
        .then((res) => {
          this.res = res;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.songlistdetails {
  position: relative;
  .back {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 25px;
    height: 25px;
    font-size: 20px;
    z-index: 2;
  }
  .head {
    width: 100%;
    height: 186px;
    padding: 30px 10px 30px 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
    z-index: 0;
    .mask {
      width: 100%;
      height: 100%;
      background-position: center center;
      background-size: cover;
      filter: blur(30px) brightness(0.7);
      transform: scale(1.5);
      position: absolute;
      z-index: -1;
    }
    .head-left {
      width: 48%;
    }
    .head-right {
      margin-left: 16px;
      color: white;
      .head-portrait {
        margin-top: 10px;
        width: 94px;
        .portrait {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 5px;
        }
        color: #ccc;
        font-size: 14px;
        display: inline-block;
        /*强制文字在一行文本框内*/
        white-space: nowrap;
        /*溢出部分文字隐藏*/
        overflow: hidden;
        /*溢出部分省略号处理*/
        text-overflow: ellipsis;
      }
    }
  }
  .divide {
    width: 100%;
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 13px;
    color: #aaa;
    background-color: #eeeff0;
  }
  .playall {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    background-color: #fff;
    margin-top: 1px;
    margin-bottom: 10px;
    span {
      margin-left: 10px;
      color: #aaa;
      font-size: 16px;
      font-weight: 400;
      flex: 1;
    }
    .iii {
      width: 26px;
      height: 26px;
      background-color: #c20c0c;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin-right: 18px;
      i {
        font-size: 12px;
      }
    }
    .icons {
      .icon {
        font-size: 30px;
        color: #c20c0c;
        font-weight: 590;
      }
    }
  }
  .comment {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .end {
    font-size: 15px;
    color: #ccc;
    width: 100%;
    height: 21px;
    line-height: 21px;
    text-align: center;
  }
  .songList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    li {
      width: 90%;
    }
  }
}
</style>